<template>
    <div id="title-bar">
        <div class="title-bar-left-items title-bar-items">
            $1000
        </div>
        <div class="title-bar-center-items title-bar-items">
            <span id="city-name">模拟城市</span>
            <span>&nbsp;-&nbsp;</span>
            <span id="sim-time">2024/8/7</span>
        </div>
        <div class="title-bar-right-items title-bar-items">
            <img id="population-icon" src="../assets/icons/person.png">
            <span id="population-counter">0</span>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
/* TITLE BAR */

#title-bar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    height: 48px;

    background-color: #00000048;
    color: white;
    padding: 8px;

    box-shadow: 0px 0px 1px black;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.title-bar-items {
    flex: 1 1 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}

.title-bar-items.title-bar-center-items {
    font-size: 2em;
}


#population-icon {
    position: relative;
    width: 32px;
    height: 32px;
    top: -3px;
}

#population-counter {
    margin-left: 8px;
}
</style>